import { Button, Space, Upload, message } from 'antd';
import { UploadOutlined, ZoomInOutlined, ZoomOutOutlined, CompassOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';

interface HeaderProps {
  onZoomIn: () => void;
  onZoomOut: () => void;
  onResetNorth: () => void;
}

const MapHeader = ({ onZoomIn, onZoomOut, onResetNorth }: HeaderProps) => {
  const uploadProps: UploadProps = {
    name: 'file',
    action: '/api/upload',
    accept: '.geojson,.json,.kml,.csv',
    onChange(info) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
  };

  return (
    <Space size="middle" style={{ padding: '0 16px' }}>
      <Upload {...uploadProps}>
        <Button icon={<UploadOutlined />}>上传数据</Button>
      </Upload>
      <Space>
        <Button icon={<ZoomInOutlined />} onClick={onZoomIn}>放大</Button>
        <Button icon={<ZoomOutOutlined />} onClick={onZoomOut}>缩小</Button>
        <Button icon={<CompassOutlined />} onClick={onResetNorth}>指北</Button>
      </Space>
    </Space>
  );
};

export default MapHeader;